<template>
  <el-main>
    <el-button type="primary" @click="addQuestion">添加</el-button>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="sort" label="排序" width="180"> </el-table-column>
      <el-table-column prop="name" label="选项"> </el-table-column>
      <el-table-column  label="匹配需求标签">
        <template slot-scope="scope">
          <el-select disabled v-model="scope.row.demand_label_id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
        <div v-if="scope.row.name != '其他'">
          <el-button type="text" class="editText" @click="exitUser(scope.row)"
            >修改</el-button
          >
          <el-button type="text" @click="labeClose(scope.row)" class="deletText">删除 </el-button>
        </div>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="addLabelType ? '新增选项' : '修改选项'"
      :visible.sync="dialogAddlabel"
      @close="cancel"
    >
      <el-form :model="addlabel">
        <el-form-item label="排序" label-width="120px">
          <el-input v-model="addlabel.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选项名称" label-width="120px">
          <el-input v-model="addlabel.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="匹配需求标签" label-width="120px" >
          <el-select v-model="demand_label_id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirmLabel">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="确认要删除该问卷吗？"
      :visible.sync="dialogDellabel"
      @close="cancel"
      width="30%"
    >
    <div style="display: flex;
    justify-content: flex-end;">
         <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="delLabel">确 定</el-button>
    </div>
    </el-dialog>
  </el-main>
</template>

<script>
import {
  questionLabelList,
  questionLabelAdd,
  questionLabelEdit,
  questionLabelDel,
  demandLabelList,
  association
} from "@/api/configApi";
import { mapGetters } from "vuex";
export default {
  components: {},
  computed: {
    ...mapGetters(["type"]),
  },
  data() {
    return {
      dialogAddlabel: false,
      addLabelType: true,
      dialogDellabel: false,
      region_id: this.$store.state.user.region_id,
      tableData: [],
      count: 0,
      page: 1,
      limit: 10,
      demand_label_id: '',
      addlabel: {
        name: "",
        sort: 0,
        id: "",
      },
      options: []
    };
  },
  async mounted() {
    this.questionLabelList();
    demandLabelList({
      page: this.page,
      limit: 999,
    }).then(res => {
      this.options = res.list
    })
  },
  methods: {
    delLabel(){
      questionLabelDel({
        question_label_id: this.addlabel.id
      }).then(res => {
        this.cancel()
       this.questionLabelList();

        this.$message({
          message: "删除成功",
          type: "success",
        });
      })
    },
    labeClose(data){
      this.addlabel.id = data.id
      this.dialogDellabel = true
    },
    confirmLabel() {
      if (this.addLabelType) {
        this.questionLabelAdd();
      } else {
        this.questionLabelEdit();
        association({
          question_label_id: this.addlabel.id,
          demand_label_id: this.demand_label_id
        })
      }
    },
    questionLabelEdit() {
      questionLabelEdit({
        question_label_id: this.addlabel.id,
        region_id: this.region_id,
        sort: this.addlabel.sort,
        name: this.addlabel.name,
      }).then((res) => {
        this.dialogAddlabel = false;
        this.questionLabelList();
        this.$message({
          message: "修改成功",
          type: "success",
        });
      });
    },
    cancel() {
      this.addlabel = {
        name: "",
        sort: 0,
        id: "",
      },
      this.dialogDellabel = false
      this.dialogAddlabel = false;
    },
    addQuestion() {
      this.dialogAddlabel = true;
      this.addLabelType = true;
    },
    questionLabelAdd() {
      questionLabelAdd({
        demand_label_id: this.demand_label_id,
        name: this.addlabel.name,
        sort: this.addlabel.sort,
      }).then((res) => {
        this.dialogAddlabel = false;
        this.questionLabelList();
        this.$message({
          message: "添加成功",
          type: "success",
        });
      });
    },
    questionLabelList() {
      questionLabelList({
        region_id: this.region_id,
        page: this.page,
        limit: this.limit,
      }).then((res) => {
        console.log(res);
        this.tableData = res.list;
      });
    },
    exitUser(data) {
      this.addlabel.name = data.name
      this.addlabel.id = data.id
      this.addlabel.sort = data.sort
      this.demand_label_id = data.demand_label_id
      this.addLabelType = false
      this.dialogAddlabel = true
    },
  },
};
</script>

<style scoped lang="less">
.el-main {
  margin: 30px 15px;
}
</style>
